<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">

    <style>

    </style>
</head>
<body class="frame-body">
<div id="wrapper" v-cloak>
    <!-- header-->
    <el-row>
        <div style="height: 60px; line-height: 60px; background: white">
            <el-row>
                <el-col :span="9">
                    <div style="color: dodgerblue; font-size: 24px; padding-left: 100px">个人健康信息管理平台</div>
                </el-col>
                <el-col :span="10">
                    <el-menu :default-active="src" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="index">首页</el-menu-item>
                        <el-menu-item index="message">在线留言</el-menu-item>
                        <el-menu-item index="person">个人信息</el-menu-item>

                    </el-menu>
                </el-col>

                <!--    parent.location.href index的父类frame为基础来跳转页面，所以整个页面都会变为目的地址
        location.href则是以index为基础来跳转，所以只会改变index的内容，frame页面仍然存在-->
                <div >
                    <el-button  @click="parent.location.href = 'http://localhost:9999/page/end/frame.html?target=index'">
                        前往后台
                    </el-button>

                    <el-button  @click="logout">退出</el-button>
                </div>



                <el-col :span="3">
                    <div v-if="user.id">
<!--                        <span>欢迎</span>-->

                        <span>
                            &nbsp&nbsp&nbsp您好,&nbsp&nbsp{{user.nickName}}&nbsp&nbsp:&nbsp&nbsp{{user.username}}
                        </span>
                    </div>

                    <div v-else>
                        <a href="/page/end/login.html">
                            <el-button  type="primary">登录</el-button>
                        </a>
                        <a href="/page/end/register.html">
                            <el-button >注册</el-button>
                        </a>
                    </div>
                </el-col>
            </el-row>


        </div>
    </el-row>

    <!-- main -->
    <div id="main" style="margin-bottom: 50px">
        <iframe id="myiframe" :src="src + '.html?new=' + Math.random()" frameborder="0" scrolling="no"
                style="width: 100%"></iframe>
    </div>

    <!-- main -->


    <div style="text-align: center; position: fixed; bottom: 0; width: 100%">
        <el-card>
            <p>
                <span style="margin-left: 0px">人生如逆旅</span>
                <span style="margin-left: 10px">我亦是行人</span>
            </p>
            ECUT &nbsp ©2022  &nbsp 2021816Z
        </el-card>
    </div>

</div>

<!--    js-->
<script src="../../js/jquery.min.js"></script>

<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>

<script>
    // 实现 iframe  高度自适应
    function reinitIframe() {
        const iframe = document.getElementById("myiframe");
        try {
            const bHeight = iframe.contentWindow.document.body.scrollHeight;
            const dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            iframe.height = Math.max(bHeight, dHeight, (window.innerHeight - 115));
        } catch (ex) {
        }
    }

    window.setInterval("reinitIframe()", 100);


    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            src: 'index',
        },
        created() {
            $.ajax({url: '/api/user/session', method: "GET", async: false, success: (res) => {this.user = res.data || {}}})

            if (location.search) {
                this.src = getUrlParamValue('target')
            }
        },
        methods: {
            handleSelect(key) {
                this.src = key
                console.log(key)
                location.search = "target=" + this.src
                window.setInterval("reinitIframe()", 50);
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
        }
    })

    /**
     * 获取url参数
     * @param name
     * @returns {string|null}
     */
    function getUrlParamValue(name) {
        if (name == null || name === 'undefined') {
            return '';
        }
        let searchStr = decodeURI(location.search);
        let infoIndex = searchStr.indexOf(name + "=");
        if (infoIndex === -1) {
            return null;
        }
        let searchInfo = searchStr.substring(infoIndex + name.length + 1);
        let tagIndex = searchInfo.indexOf("&");
        if (tagIndex !== -1) {
            searchInfo = searchInfo.substring(0, tagIndex);
        }
        return searchInfo;
    }
</script>
</body>
</html>
